
{% extends "./inc/appbase.html" %}
{% block style%}
<style>
    .area {
        margin: 20px auto 0px auto;
    }

    .mui-input-group {
        margin-top: 10px;
    }

    .mui-input-group:first-child {
        margin-top: 20px;
    }

    .mui-input-group label {
        width: 40%;
    }

    .mui-input-row label~input,
    .mui-input-row label~select,
    .mui-input-row label~textarea {
        width: 60%;
    }

    .mui-checkbox input[type=checkbox],
    .mui-radio input[type=radio] {
        top: 6px;
    }

    .mui-content-padded {
        margin-top: 25px;
    }

    .mui-btn {
        padding: 10px;
    }

    .link-area {
        display: block;
        margin-top: 25px;
        text-align: center;
    }

    .spliter {
        color: #bbb;
        padding: 0px 8px;
    }

    .oauth-area {
        position: absolute;
        bottom: 20px;
        left: 0px;
        text-align: center;
        width: 100%;
        padding: 0px;
        margin: 0px;
    }

    .oauth-area .oauth-btn {
        display: inline-block;
        width: 50px;
        height: 50px;
        background-size: 30px 30px;
        background-position: center center;
        background-repeat: no-repeat;
        margin: 0px 20px;
        /*-webkit-filter: grayscale(100%); */
        border: solid 1px #ddd;
        border-radius: 25px;
    }

    .oauth-area .oauth-btn:active {
        border: solid 1px #aaa;
    }

    .oauth-area .oauth-btn.disabled {
        background-color: #ddd;
    }
    .mui-input-row label~#verificationCode{width:35%;box-sizing: border-box;}
    .mui-input-row .mui-btn{width: 23%;box-sizing: border-box;right:10px;padding: 8px 0px;}
    .mui-btn-outlined {margin-top:3px;color: #007aff;border: 1px solid #007aff; }

</style>
{%endblock%}
{% block content%}
<header class="mui-bar mui-bar-nav">
    <a href="/login" class=" mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left"><span class="mui-icon mui-icon-left-nav"></span>首页</a>
    <h1 class="mui-title">{{controller.meta_title}}</h1>

</header>
<div class="mui-content">
    <form id='login-form' class="mui-input-group">
        <div class="mui-input-row">
            <label>邀请人代理ID</label>
            <input id='inviteragentid' type="text" value="" name="inviteragentid" class="mui-input-clear mui-input" placeholder="邀请人代理ID">
        </div>
        
        <div class="mui-input-row">
            <label>本人游戏ID</label>
            <input id='gameid' type="text" value="" name="gameid" class="mui-input-clear mui-input" placeholder="本人游戏ID">
        </div>
        <!--
        <div class="mui-input-row">
            <label>微信号</label>
            <input id='weixinnum' type="text" value="" name="weixinnum" class="mui-input-clear mui-input" placeholder="微信号">
        </div>
        -->
         <!--
        <div class="mui-input-row">
            <label>账号</label>
            <input id='account' type="text" value="" name="username" class="mui-input-clear mui-input" placeholder="字母，数字等，用户名">
        </div>
        
        <div class="mui-input-row">
            <label>邮箱</label>
            <input id='email' type="email" value="" name="email" class="mui-input-clear mui-input" placeholder="电子邮箱">
        </div>
         -->
        <div class="mui-input-row">
            <label>手机号码</label>
            <input id='mobile' type="number" value="" name="mobile" class="mui-input-clear mui-input" placeholder="手机号码">
        </div>
        
        <div class="mui-input-row">
             <label>手机验证码</label>
             <button type="button" id="btnVerificationCode" class="mui-btn mui-btn-outlined">获取验证码</button>
             <input id="verificationCode" type="text" class="mui-input" placeholder="请输入验证码">
        </div>
        <div class="mui-input-row">
            <label>密码</label>
            <input id='password' type="password" value="" name="password" class="mui-input-clear mui-input" placeholder="请输入密码">
        </div>
        <div class="mui-input-row">
            <label>确认</label>
            <input id='password2' type="password" value="" name="password2" class="mui-input-clear mui-input" placeholder="确认密码">
        </div>
    </form>
    <form class="mui-input-group">
        <ul class="mui-table-view mui-table-view-chevron">
            <li class="mui-table-view-cell">
            <div class="link">我同意 <a id='agreement' href="/licence">《用户合作协议》</a></div>
                <div id="autoLogin" class="mui-switch mui-active">
                    <div class="mui-switch-handle"></div>
                </div>
            </li>
        </ul>
    </form>
    <div class="mui-content-padded">

        <button id='login' class="mui-btn mui-btn-block mui-btn-primary">注册</button>
        <div class="link-area">我已经有一个帐户 <a id='forgetPassword' href="/center/public/login">立即登录!</a></div>
    </div>
    <div class="mui-content-padded oauth-area" style="display: none">
        <a  href="/ext/qq/index" class="oauth-btn" style="background: url('/static/mobile/img/qq.png');background-size:40px 40px; background-repeat:no-repeat; background-position: center;"></a>
        <div class="oauth-btn weixin" style="background: url('/static/mobile/img/weixin.png');background-size:40px 40px; background-repeat:no-repeat; background-position: center;"></div>
        <a href="/ext/weibo/index" class="oauth-btn" style="background: url('/static/mobile/img/sinaweibo.png');background-size:40px 40px; background-repeat:no-repeat; background-position: center;"></a>
    </div>
</div>

{% endblock %}
{% block script %}

<script>
    
    var btn = document.getElementById("login"),
    inviteragentid = document.getElementById("inviteragentid"),
    gameid = document.getElementById("gameid"),
    //weixinnum = document.getElementById("weixinnum"),
    //account = document.getElementById("account"),
    password = document.getElementById("password"),
    //email = document.getElementById('email'),
    mobile = document.getElementById('mobile'),
    password2 = document.getElementById('password2');

    var btnVerificationCode = document.getElementById("btnVerificationCode");
    var verificationCode = document.getElementById("verificationCode");
    
    
    btn.addEventListener("tap", function () {
    	
    	if(!inviteragentid.value){
            mui.toast("邀请人代理ID不能为空");
            return;
        }
    	
    	if(!gameid.value){
            mui.toast("本人游戏ID不能为空");
            return;
        }
    	if(!mobile.value){
          mui.toast('手机号码不能为空');
          return;
        }

        if(!verificationCode.value){
          mui.toast('验证码不能为空');
          return;
        }
        
        if(!password.value){
            mui.toast("密码不能为空");
            return;
        }
        
        if(!password2.value){
          mui.toast('确认密码不能为空');
          return;
        }
        var isActive = document.getElementById("autoLogin").classList.contains("mui-active");
        if(!isActive){
        	mui.toast('请同意《用户合作协议》');
            return;
        }
        
        mui.post('/center/public/register',{
          mobile:mobile.value,
          iagentid:inviteragentid.value,
          game_id:gameid.value,
          password:password.value,
          password2:password2.value,
          verifcode:verificationCode.value,
          clause:'on'
        },function(msg){
                    //服务器返回响应，根据响应结果，分析是否登录成功；
            if(msg.errno === 1000){
                mui.toast(msg.errmsg);
            }else{
                mui.toast(msg.data.name);
                setTimeout(function(){
                    mui.openWindow({url:msg.data.url})
                },1500);
            }
          },'json'
        );
    });

    btnVerificationCode.addEventListener("tap",function () {
    	senmobile();
    });

    var issend = true;
    function senmobile() {
			if(issend) {
			//验证电话号码手机号码  
			var phoneObj = document.getElementById('mobile');
			if(phoneObj.value != "") {
			   var phoneVal = phoneObj.value;
			   var p1 = /^(0|86|17951)?(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[57])[0-9]{8}$/;
			   var me = false;
			   if(p1.test(phoneVal)) me = true;
			   if(!me) {
				   phoneObj.value = '';
				   mui.toast('请输入正确的手机号码');
				   phoneObj.focus();
				   return false;
			   }else {
                   issend = false;
                   getverifcode(60);
			   }
			} else {
				mui.toast('手机号码不能为空');
				return false;
			  }
			}
		   }
				
	function update_a(num, t) {
				if(num == t) {
                    $(btnVerificationCode).removeClass('disabled').prop('disabled',false);
					btnVerificationCode.innerHTML = " 重新发送 ";
					issend = true;
				} else {
					var printnr = t - num;
					btnVerificationCode.innerHTML = printnr + " 秒后重发";
				}
    };

    function getverifcode(t) {
        mui.post('/center/message/verifcode',{
          phone: mobile.value,
		  type: 1
        },function(data){
            //服务器返回响应，根据响应结果，分析是否登录成功；
            console.log("发送data--:"+JSON.stringify(data));
            if(data.errno==0){
               mui.toast(data.data);
               $(btnVerificationCode).addClass('disabled').attr('autocomplete','off').prop('disabled',true);
               for(i = 1; i <= t; i++) {
				 window.setTimeout("update_a(" + i + "," + t + ")", i * 1000);
			   }
            }else {
               mui.toast(data.errmsg);
               issend = true;
               $(btnVerificationCode).removeClass('disabled').prop('disabled',false);
            }
          },'json'
        );
	}
</script>
{% endblock %}